/*
 * @Author: Hansen 
 * @Date: 2020-09-17 16:57:46 
 * @Last Modified by: Hansen
 * @Last Modified time: 2020-09-18 10:08:14
 */

 /* 搜索框 */
 .tt-search{
   max-width: 640px;
   margin: 0 auto;
   background: #f8f8f8;
   z-index: 110;
 }
 /* 如果下滑就固定搜索框 */
 .tt-search.fixed{
   position: fixed;
   width: 100%;
   top: 0;
   left: 0;
 }
 /* 搜索状态中，覆盖内容区 */
 .tt-search.on-focus{
   position: fixed;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   overflow-y: auto;
 }
 /* 处理有标题栏的情况 */
 .tt-header ~ .tt-content .tt-search.on-focus{
   top: 2.3rem;
 }
 /* 处理有导航栏的情况 */
 .tt-navbar ~ .tt-content .tt-search.on-focus{
   bottom: 2.5rem;
 }
 /* 搜索栏中的表单 */
 .tt-search > .tt-search-form{
   display: flex;
   height: 2.3rem;
   align-items: center;
 }
 /* 输入框的容器 */
 .tt-search > .tt-search-form > .tt-search-input-wrap{
   flex: 1;
   position: relative;
   padding: 0 0.5rem;
 }
 /* 取消按钮 */
 .tt-search > .tt-search-form > .tt-search-cancel{
   flex: 0 0 2.2rem;
   padding-right: 0.5rem;
   text-align: center;
   font-size: 0.7rem;
   display: block;
 }
 /* 对取消按钮的控制 */
 .tt-search.on-focus > .tt-search-form > .tt-search-cancel{
   display: none;
 }
 /* 搜索图表 */
 .tt-search .tt-search-icon{
   position: absolute;
   /* width: 0.8rem; */
   height: 0.8rem;
   line-height: 0.8rem;
   font-size: 0.7rem;
   left: 1rem;
   top: 0;
   bottom: 0;
   margin: auto;
   color: #ccc;
 }
 /* 输入框的样式 */
 .tt-search .tt-search-input{
   box-sizing: border-box;
   width: 100%;
   height: 1.6rem;
   border: 1px solid #ddd;
   font-size: 0.8rem;
   padding-left: 1.5rem;
   background: #fff;
   border-radius: 0.2rem;
 }
 /*清除按钮的样式*/
 .tt-search .tt-search-clear{
   position: absolute;
   height: 0.8rem;
   line-height: 0.8rem;
   width: 0.8rem;
   font-size: 0.6rem;
   top: 0;
   bottom: 0;
   margin: auto 0;
   right: 1rem;
   border-radius: 50%;
   color: #fff;
   background: #ccc;
   display: none;
 }
 /* 对清空按钮的控制 */
 /* :valid是和 input 中的“required”属性对应 */
 .tt-search.on-focus .tt-search-input:valid + .tt-search-clear{
   display: block;
 }

 /* 搜索建议 */
 .tt-search > .tt-search-suggest{
    position: absolute;
    width: 100%;
    z-index: 150;
    background-color: white;
 }
 .tt-search > .tt-search-suggest > .tt-suggest-item{
   padding-left: 1rem;
   height: 2rem;
   line-height: 2rem;
   font-size: 0.8rem;
   background: #fff;
   border-bottom: 1px solid #eee;
   color: #333;
 }

